<template>
	<view class="all">
		<view class="bg"></view>
		<view class="mess">
			<!-- <u-upload :show-upload-btn="true" :action="action" :file-list="fileList" count="1"></u-upload> -->
			<u-upload ref="uUploadRef" :auto-upload="false"  :max-count="1"
				:show-upload-btn="fileList.length < 1" @after-read="handleAfterRead"></u-upload>

			<!-- 确定按钮：没有图片时禁用，有图片时才可点击 -->
			<view class="btn-container">
				<u-button type="primary" :disabled="uUploadRef === '' "  @click="onConfirm">
					确认修改
				</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue';

	const fileList = ref([]); 
	const uUploadRef = ref('')
	// 选择文件后的回调（纯前端处理，模拟上传成功）
	const handleAfterRead = (file) => {
	  uUploadRef.value = [file]; 
	  uni.showToast({
	    title: '图片已选择',
	    icon: 'success'
	  });
	  
	};
	
	// 确定按钮点击事件
	const onConfirm = () => {
	  if (uUploadRef.value.length === 0) return;
	  
	  // 这里可以处理选中的图片
	  console.log('当前选中的图片信息：', uUploadRef.value);
	  uni.showToast({
	    title: '修改成功',
	    icon: 'success'
	  });
	  uni.navigateTo({
	  	url: '/pages/my/myDetail/myDetail',
	  	success: res => {},
	  	fail: () => {},
	  	complete: () => {}
	  });
	};
</script>

<style scoped>
	.all {
		padding-top: 10rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.bg {
		background-color: #0472fe;
		width: 100%;
		height: 300rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
	}

	.mess {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		padding: 30rpx;
		height: 500rpx;
	}
</style>